<template>
	<view class="page-root">
		<view class="content-root content-root-local">
			<swiper class="swiper-lay" :indicator-dots="true" :autoplay="false" :current="currentIndex" @change="onSwiperChange">
				<swiper-item v-for="(item,index) in dataList" :key="index" class="swiper-item" >
					<fr-image class="swiper-iamge" :src="item.photo_path" loading-ing-img="oblique-light" loading-error-img="/static/logo.png"></fr-image>
				</swiper-item>
			</swiper>
			
			<view class="page-indicator">
				{{currentIndex + 1}} / {{dataList.length}}
			</view>
		</view>
		<view class="status_bar status_bar_local"></view>
		<view class="header-lay flex-h">
			<view class="icon-group flex-h">
				<image class="header-icon" src="/static/imgs/tools/icon_nav_back_white@2x.png" @click="onBackClick"></image>
			</view>

			<view class="icon-group flex-h">
				<image class="header-icon" src="/static/imgs/tools/icon_nav_del@2x.png" @click="onDelClick"></image>
				<view class="header-test" @click="onEditClick">{{$t("public.edit")}}</view>
			</view>

		</view>
		
		<hqs-popup title="弹窗标题" v-model="showInputPopup" from="right" width="60vw">
		    <photoInfoInputView :dataInfo="dataList[currentIndex]" 
				@onCancelClick="showInputPopup = false"
				@onConfirmClick="onEditConfirmClick"></photoInfoInputView>
		</hqs-popup>
		
		<uni-popup id="delDialog" ref="delDialog" type="dialog" >
			<uni-popup-dialog type="info" title="删除" content="确定删除这张照片吗？" 
				:before-close="true" @confirm="delDialogConfirm" @close="delDialogClose"></uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script>
	import hqsPopup from '@/components/hqs-popup/hqs-popup';
	import photoInfoInputView from './_components/photoInfoInputView';
	import FrImage from '@/components/fr-image/fr-image.vue'
	
	import {
		updateVisualPhotoByMacnumbAndPosno,
		deleteVisualPhotoByMacnumbAndPosno
	} from "@/localService/visualPhotoService.js";
	
	// import uniPopupDialog from '@/components/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		computed: {
			...mapState(['userInfo', 'selectInfo']),
		},

		components: {
			hqsPopup,
			FrImage,
			photoInfoInputView
		},

		onLoad(option) {
			this.currentIndex = Number(option.currentIndex);
			this.dataList = JSON.parse(option.dataList);
		},

		data() {
			return {
				currentIndex: 0,
				dataList: [],
				showInputPopup: true
			};
		},

		methods: {			
			updateVisualPhotoByMacnumbAndPosnoApi(inObj) {
				updateVisualPhotoByMacnumbAndPosno(inObj).then(e => {
					uni.showToast({
						title:"更新成功啦！"
					})					
				})
			},
			
			deleteVisualPhotoByMacnumbAndPosnoApi(inDmgCode , inPhotoNo){
				deleteVisualPhotoByMacnumbAndPosno(inDmgCode , inPhotoNo).then(e => {
					uni.showToast({
						title:"删除成功啦！"
					})
				})
			},
			
			onSwiperChange(e) {
				this.currentIndex = e.detail.current;
			},
			
			onBackClick() {
				uni.navigateBack({
					delta:1
				})
			},
			
			onDelClick() {
				this.$refs.delDialog.open()
			},
			
			delDialogConfirm() {
				this.deleteVisualPhotoByMacnumbAndPosnoApi(
					this.dataList[this.currentIndex].dmg_code , this.dataList[this.currentIndex].photo_no);
				
				if(this.currentIndex >= 0 )
					this.dataList.splice(this.currentIndex, 1);
				
				if(this.currentIndex >= this.dataList.length)	
					this.currentIndex = this.dataList.length - 1;
				this.$refs.delDialog.close()
			},
			
			onEditClick() {
				this.showInputPopup = true;
			},
			
			delDialogClose() {
				
			},
			
			onEditConfirmClick(e) {
				this.showInputPopup = false;
				this.updateVisualPhotoByMacnumbAndPosnoApi(e);
			}
		}
	}
</script>

<style scoped lang="scss">
	.status_bar_local {
		background-color: #000;
		opacity: 0.9;
	}

	.header-lay {
		background-color: #000;
		opacity: 0.4;
		align-items: center;
		padding: 10upx;
		justify-content: space-between;

		.icon-group {
			align-items: center;

			.header-icon {
				width: 25upx;
				height: 25upx;
				margin-right: 15upx;
			}

			.header-test {
				font-size: 16px;
				color: #FFFFFF;
			}
		}
	}

	.content-root-local {
		position: absolute;
		top: 0;
		width: 100vw;
		height: 100vh;
		
		.swiper-lay {
			width: 100%;
			height: 100%;
			background-color: #2C405A;
			
			.swiper-item {
				width: 100%;
				height: 100%;				
				
				.swiper-iamge {
					width: 100vw;
					height: 100vh;				
				}
			}
		}
		
		.page-indicator {
			position: absolute;
			width: 100vw;
			bottom: 10vh;
			text-align: center;
			font-size: 18upx;
		}
	}
</style>
